<template>
  <div class="box">
      <el-row class="search-row">
        <el-col :span="12" style="text-align: right;">
          <el-button style="margin-right: 20px" type="primary" @click="downloadTemplate()">模板下载</el-button>
        </el-col>
        <el-col :span="12">
          <el-upload action="/ordersetting/upload.do"
            name="excelFile"
            :show-file-list="false"
            :on-success="handleSuccess"
            :before-upload="beforeUpload">
            <el-button type="primary">上传文件</el-button>
          </el-upload>
        </el-col>
      </el-row>
        <el-main style="height:660px">
          <el-calendar>
            <template slot="dateCell" slot-scope="{date, data}" class="calItem">
              <div :class="data.isSelected ? 'is-selected' : ''" @click="calClick(data)">
                    <p class="dayItem"  v-if="data.day.substr(-2) < 10">{{ data.day.substr(-1)}}</p>
                    <p class="dayItem"  v-else>{{ data.day.substr(-2)}}</p>
                    <div v-for="(item,index) in calendarData" :key="index">
                        <div v-if="(item.years).indexOf(data.day.split('-').slice(0)[0])!=-1 && (item.months).indexOf(data.day.split('-').slice(1)[0])!=-1 && (item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
                            <el-tooltip :content="item.number" placement="right">
                                <div class="mark">可预约:{{item.number}}</div>
                            </el-tooltip>
                            <el-tooltip :content="item.reservations" placement="right">
                                <div class="mark">已预约:{{item.reservations}}</div>
                            </el-tooltip>
                        </div>
                        <div v-else></div>
                    </div>
                    <p class="addBtn" v-show="data.isSelected == true" @click="dialogVisible = true">{{butName}}</p>
                </div>
            </template>
          </el-calendar>
          <el-dialog
            :title="formData.orderDate"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-form @submit.native.prevent>
                <el-form-item label="可预约人数">
                    <el-input v-model="formData.number"></el-input>
                </el-form-item>
                <el-form-item label="已预约人数">
                    <el-input v-model="formData.reservations"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false;add()">确 定</el-button>
            </span>
          </el-dialog>
        </el-main>
  </div>
</template>

<script>
import { saveOrderSetting, getOrderSetting } from "@/api/ordersetting";

export default {
  data() {
    return {
      butName:"",
      formData:{
        orderDate:'',
        content: '',
        reservations:''
      },
      dialogVisible: false,
      value: new Date().toLocaleDateString(),
      calendarData: []
    };
  },
  methods: {
    calClick(item){
      console.log(this.value)
      if(new  Date(item.day).getTime()>new Date(this.value).getTime()){
        this.formData.orderDate = item.day
        this.butName="设置"
        return
      }
      this.butName=""
      return
    },
    handleClose(done){
      console.log(done)
      done()
    },
    add(){
      saveOrderSetting(this.formData)
        .then((res) => {
          
        })
        .catch((error) => {
          this.outputError(error);
        });
      var date = this.formData.orderDate.split('-')
      var a =  { 
        years: [date[0]],
        months: [date[1]],
        days: [date[2]],
        number: this.formData.number,
        reservations: this.formData.reservations }
        this.calendarData.push(a)
    }
  },
  mounted: function () {
    getOrderSetting()
      .then(response => {
        var newTime = new Date(response.data[0].orderDate);
        console.log(newTime)
      })
      .catch(error => {
        this.outputError(error)        
      }) 
  }
};
</script>

<style lang="scss">
.el-calendar-table .el-calendar-day {
    height: 180px;
}
</style>

